<template>
    <div id="homeInspectionlist">
      <div v-if="showHomeInspection">
        <div class="top">
          <div class="top-left-search" style="margin-bottom: 10px;">
            <van-search v-model="taskListName" show-action placeholder="请输入户主姓名" @search="serachData">
              <template #left>
                <!--{{options}}-->
                <div @click="options.length>0?show2 = true:''" style="margin-right: 5px;font-size: 14px;">
                  <van-icon name="arrow-down" />{{areaValue }}</div>
              </template>
              <template #action>
                <div style="display: flex;align-items: center;">
                  <van-icon style="margin-right: 5px;" @click="toHomeInspection" name="filter-o" size="18" />
                  <van-button @click="changeMap" type="info" size="small"><van-icon name="exchange" />地图</van-button>
                </div>
              </template>
            </van-search>
          </div>
        </div>
        <div class="middle" style="overflow: auto;">
          <div class="search-list">
            <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad">
              <div class="search-list-top" v-for="(item, index) in cityName2" :key="index" @click="SelectGoto(item)">
                <div class="top">
                  <div style="float: left;"><span style="font-weight:1000; font-size: 18px;color: #000;line-height: 36px;">
                  户主姓名：{{item.cqr}}</span>
                  </div>

                </div>
                <div  class="top" v-if="nowIndex==1" style="font-size: 18px;clear:both;color: #000;line-height: 36px;">
                  <span style="font-weight: bold;">核查结论：{{item.checkFirstResultName}}</span>
                </div>
                <div class="top1">
                  自建房排查编号：<span style="font-weight: 500;">{{ item.yhfwbh }}</span>
                </div>
                <div class="top1">
                  房屋用途：<span style="font-weight: 500;">{{item.fwyt}}</span>
                </div>
                <div v-if="nowIndex==1" class="top">
                  <div>
                    <span >检查人：{{item.checkUser}}</span>
                  </div>
                </div>
                <div v-if="nowIndex==1" class="top">
                  <div>
                    <span >检查时间：{{item.checkTime}}</span>
                  </div>
                </div>
                <div
                  class="top1">
                  地址：<span style="font-weight: 500;">{{ item.address }}</span>
                </div>
              </div>
            </van-list>
          </div>
        </div>
        <div class="bottomfix">
          <div class="sort ">
            <ul>
              <li v-for="(item, index) in bottomList" :key="index" :class="{ secelt: nowIndex == index }" @click="bottomListBtn(item, index)">
                <el-badge v-if="nowIndex == index" :value="totalCount" :max="99" class="item">
                  {{ item }}
                </el-badge>
                <span v-else>
              {{ item }}
            </span>
              </li>
            </ul>
          </div>
        </div>
        <van-popup v-model="show2" @click-overlay="close" round position="bottom">
          <van-cascader v-model="cityCode" title="请选择" :closeable="false" :options="options" @change="onChange" @finish="" />
          <span style="position: absolute; top: 2%; right: 10px;font-size: 16px;" @click="close">确定</span>
        </van-popup>
      </div>
      <div v-show="!showHomeInspection">
        <home-inspection ref="homeinspection" :cityCode="cityCode.toString()" :data2="$route.query.data2" :data="$route.query.data"></home-inspection>
      </div>
    </div>
</template>

<script>
import Pubsub from 'pubsub-js'
  import axios from 'axios'
  import { GetAdministrative,getDatalistForTree} from '../../../utils/api'
  import dd from 'gdt-jsapi'
  import homeInspection from "../ConstructionInspection/homeInspection"
  export default {
    name: "homeInspectionlist",
    data(){
      return{
        filterCityCode:'',
        filterData:'',
        showHomeInspection:true,
        options:[],
        loading2:false,
        cityCode:'',
        areaValue:'',
        taskListName:'',
        show2:false,
        value:'',
        bottomList: ['待检查', '已检查'],
        sortList: [
          {
            title: '所属区域',
            name: 'RWZT',
            sort: 'asc'
          },
        ],
        showPicker:false,
        CountyData:[],
        totalCount:0,
        cityName2:[],
        finished2:false,
        BaseURL:window.g.BaseURL,
        nowIndex:0,
        pageNum:0
      }
    },
    methods:{
      getXZQH: async function (value, selectedOptions, tabIndex) {
        var res = await GetAdministrative(value)
        selectedOptions[tabIndex].children = []
        if (res.data.data.length > 0) {
          res.data.data.forEach((element) => {
            let obj = {
              text: element.cityname,
              value: element.citycode
            }
            if (tabIndex < 1) {
              obj['children'] = []
            }
            selectedOptions[tabIndex].children.push(obj)
          })
        }
      },
      onChange({ value, selectedOptions, tabIndex }) {
        if (selectedOptions[tabIndex].children && selectedOptions[tabIndex].children.length == 0 && tabIndex < 2) {
          this.getXZQH(value, selectedOptions, tabIndex)
        }
        this.onFinish({value, selectedOptions, tabIndex})
      },
      onFinish({value, selectedOptions, tabIndex}) {
        if (selectedOptions[selectedOptions.length-1].text) {
          this.areaValue = selectedOptions[selectedOptions.length-1].text;
        } else {
          this.areaValue = "惠州市";
        }
        this.cityCode = value
      },
      getXianOpenDataView: async function (data) {
        // this.options = [{
        //   text: this.areaValue,
        //   value: JSON.parse(this.$route.query.data).queryCityCode,
        // }]
        const res = await getDatalistForTree(data)
        res.data.data.forEach((item) => {
          this.options.push({
            text: item.cityname,
            value: item.citycode,
            children: []
          })
        })
        // this.options = res.data.data
      },
      //判断省市||区县
      citycode(str) {
        if (str.endsWith("0000000000")) {
          //省
          return "省";
        } else if (str.endsWith("00000000")) {
          return "市";
        } else if (str.endsWith("000000")) {
          return "县";
        } else if (str.endsWith("000")) {
          return "村镇";
        } else {
          return "社区"
        }
      },
      close() {
        this.filterCityCode = ""
        let rowData =  JSON.parse(this.$route.query.data)
        if (rowData.type==1) {
          if (this.citycode(this.cityCode.toString())=="市") {
            this.$toast.fail('请选择到区县或区县以下')
          } else {
            this.cityName2 = []
            this.show2 = false;
            this.pageNum = 1
            this.finished2 = false
            this.getList(JSON.parse(this.$route.query.data))
          }
          localStorage.setItem("listCityCode",this.cityCode)
          localStorage.setItem("options",JSON.stringify(this.options))
        } else {
          this.cityName2 = []
          this.show2 = false;
          this.pageNum = 1
          this.finished2 = false
          this.getList(JSON.parse(this.$route.query.data))
        }
        // this.cityName2 = []
        // this.show2 = false;
        // this.getList(JSON.parse(this.$route.query.data))
        // this.getcontentData()
      },
      changeMap(){
        this.$router.push({
          path: '/HouseExamination',
          query: {
            citycode: JSON.parse(this.$route.query.data).cityCode,
            cityname: this.areaValue,
            task:this.$route.query.data
          },
        })
      },
      onLoad(){
        // if (JSON.parse(this.$route.query.data).type!==1) {
          this.pageNum += 1
          this.getList(JSON.parse(this.$route.query.data))
        // }
      },
      bottomListBtn(item, index) {
        this.totalCount = ""
        this.pageNum = 1
        this.nowIndex = index
        this.cityName2 = []
        this.getList(this.getListItem)
      },
      //字段排序
      _sortlichange(item, index) {
        const self = this
        if (item.sort == 'asc') {
          item.sort = 'desc'
        } else {
          item.sort = 'asc'
        }
        if (index == 0) {
          this.showPicker = true
          this.showPicker1 = false
        } else {
          this.showPicker1 = true
          this.showPicker = false
        }
      },
      getCountyData: async function () {
        this.getCityData(330000000000).then((webResult)=>{
          this.CountyData = webResult.data.data
        })
      },
      getCityData: async function (data){
        return new Promise(async(resovlve, reject) => {
          let webResult = await axios.get(window.g.BaseURL + 'api/rescatalog/gsaCodeCity/listForTree/' + data)
          resovlve(webResult)
        })
      },
      onConfirm(val) {
        this.showPicker = false
      },
      serachData(val) {
        // this.finished = true;
        this.pageNum = 0
        this.finished2 = true;
        this.cityName2 = []
        this.onLoad()
        // this.getList(JSON.parse(this.$route.query.data))
      },
      onSearch(){

      },
      toHomeInspection(){
        this.showHomeInspection = false
        // this.$refs.homeinspection.info()

        // this.$refs.homeinspection.info()
        // console.log(this.filterData7
        // this.$refs.homeinspection.formData = this.filterData

        // this.$router.push({
        //   path: '/homeInspection',
        //   query: {
        //     data: this.$route.query.data,
        //     data2: this.$route.query.data2,
        //     cityCode:this.cityCode
        //   },
        // })
      },
      getList: async function (item){
        // this.finished2 = false
        this.loading2 = true;
        this.getListItem = item
        let  code = ""
        if (this.filterCityCode) {
          code = this.filterCityCode
        } else  {
          if (this.cityCode!=="") {
            code = this.cityCode
          } else {
            code = item.queryCityCode
          }
        }
        let param = {
          "cityCode": code,  // 当前行的queryCityCode，必传
          "taskId": item.id,  // 必传
          "taskStatus": this.nowIndex,  // 检查状态，必传
          "pageNum": this.pageNum,
          "pageSize": 10,
           cqr:this.taskListName
          // taskListName
        }
        if (this.filterData) {
          let Data = this.filterData
          for (let i in Data) {
            if (i!=='cityCode'&&i!=="pageNum") {
              if (Data[i]) {
                param[i] = Data[i]
              }
            }
          }
        }
        if (this.taskListName) {
          param.cqr = this.taskListName
        }
        let result = await axios.post(`${this.BaseURL}api/farmerHouse/houseCheckFwCheckCountry/list`, param);
        if (result.data && result.data.data) {
          this.totalCount = result.data.data.totalCount
          // this.cityName2 = result.data.data.pageList
          // this.finished2 = true;
          if (result.data.data.pageList.length>0) {
            result.data.data.pageList.forEach((item,index)=>{
              this.cityName2.push(item)
            })
            this.loading2 = false;
            if (this.cityName2.length==result.data.data.totalCount) {
              this.finished2 = true;
            } else {
              this.finished2 = false;
            }
          } else {
            // this.cityName2 = []
            this.loading2 = false;
            this.finished2 = true;
          }
        }else{
          // this.cityName2 = []
          this.loading2 = false;
          this.finished2 = true;
        }
      },
      SelectGoto: async function (data) {
        this.$router.push({
          path: '/SinceBuildings',
          query: {
            data: JSON.stringify(data),
            id:JSON.parse(this.$route.query.data).id,
            data2:JSON.stringify(this.$route.query.data),
            index:this.nowIndex,
            cityCode:this.cityCode
          },
        })
        // let parmes = {
        //   cityCode: data.cityCode,
        //   houseUse: 6,
        //   masterName: '',
        //   pageNo: 0,
        //   pageSize: 0,
        //   roleType: window.sessionStorage.getItem('citycodeRole'),
        // }
        // if (data.cityCode.length < 12 ||(data.cityCode.length  == 12 && data.cityCode.endsWith('000'))) {
        //   if (
        //     window.sessionStorage.getItem('citycodeRole') == '0' &&
        //     window.sessionStorage.getItem('SelectCity') == '1'
        //   ) {
        //     parmes.roleType = 1
        //   } else if (
        //     window.sessionStorage.getItem('citycodeRole') == '0' &&
        //     window.sessionStorage.getItem('SelectCity') == '2'
        //   ) {
        //     parmes.roleType = 2
        //   } else if (
        //     window.sessionStorage.getItem('citycodeRole') == '1' &&
        //     window.sessionStorage.getItem('SelectCity') == '2'
        //   ) {
        //     parmes.roleType = 2
        //   }
        //   const res = await houseCheckSupervisionFwCheckList1(parmes)
        //   this.cityName = res.data.data
        //   console.log(data,'xiaohe')
        //   console.log(window.sessionStorage.getItem('citycodeQXName'), 'kkkk')
        //   this.XZQHName = this.XZQHName + '  ' + data.cityName
        // } else {
        //   //选中了村 前去填表单
        //   this.ISshow = false
        //   this.XZQHName = this.XZQHName + '  ' + data.cityName
        //   window.sessionStorage.setItem('citycodeQXName1', this.XZQHName)
        //   window.sessionStorage.setItem('citycodeCun', data.cityCode)
        //   this.$router.push({
        //     path: '/SinceBuilding',
        //     query: {
        //       data: data.cityCode,
        //     },
        //   })
        // }
      },
      getCityName: async function (code){
        let result = await axios.post(`${this.BaseURL}api/farmerHouse/cityCode/getAllParentByCityCode?cityCode=${code}`);
        // this.areaValue = result.data.data.cityName
        if (result.data.data.provinceName) {
          this.areaValue = result.data.data.provinceName
        }
        if (result.data.data.cityName) {
          this.areaValue = result.data.data.cityName
        }
        if (result.data.data.countyName) {
          this.areaValue = result.data.data.countyName
        }
        if (result.data.data.townName) {
          this.areaValue = result.data.data.townName
        }
        if (result.data.data.villageName) {
          this.areaValue = result.data.data.villageName
        }

      }
    },
    mounted() {
      self.homeInspectionFilter = Pubsub.subscribe("homeInspectionFilter", (msg, data) => {
        this.finished2 = false
        this.filterCityCode = data.cityCode
        this.pageNum = 0
        this.cityName2 = []
        this.filterData = data
        this.showHomeInspection = true
      })
      dd.ready(function () {
        dd.setTitle({
          title: "房屋检查",
        })
          .then((res) => {})
          .catch((err) => {
            console.error(err)
          })
      })
    },
    beforeDestroy() {
        self.homeInspectionFilter = null
    },
    created(){
      let rowData = JSON.parse(this.$route.query.data)
      if (rowData.type==1) {
        if (localStorage.getItem("listCityCode")) {
          this.cityCode = parseInt(localStorage.getItem("listCityCode"))
          this.show2 = false
        } else {
          if (this.citycode(window.localStorage.getItem('citycode'))=="省"||this.citycode(window.localStorage.getItem('citycode'))=="市") {
            this.show2 = true
          }else{
            this.show2 = false
          }
          this.cityCode = window.localStorage.getItem('citycode')
        }
      }
      if (this.$route.query.cityCode) {
        this.cityCode = this.$route.query.cityCode
      }
      this.getCityName(this.cityCode ? this.cityCode : JSON.parse(this.$route.query.data).cityCode)
      if (localStorage.getItem("options")) {
        this.options = JSON.parse(localStorage.getItem("options"))
      } else {
        this.getXianOpenDataView(this.cityCode ? this.cityCode : JSON.parse(this.$route.query.data).cityCode)
      }
    },
    components:{
      homeInspection
    }
  };
</script>

<style scoped lang="scss">
  #homeInspectionlist{
    font-size: 14px;
    height: 100vh;
    width: 100vw;
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    background-color: #eee;
    /*overflow-y: auto;*/
    .bottomfix {
      border-radius: 10px;
      height: 55px;
      /*background: #fff;*/
      color: #000 !important;
      margin: 10px 0px;
      .secelt {
        background: #1989fa;
        border-radius: 10px;
        color: #ffffff;
        // border-top-left-radius: 10px;
        // border-bottom-left-radius: ;
      }
    }
    .sort {
      height: 5vh;
      line-height: 5vh;
      background: #fff;
      ul {
        display: flex;
        li {
          // width: 33.33333333333%;
          width: 100%;
          text-align: center;
          font-size: 1.6vh;
          font-weight: 400;
          color: #6c6c6c;
          cursor: pointer;
          img {
            height: 1.5vh;
          }
        }
      }
    }
    .middle {
      padding: 10px;
      background:#ffffff;
      height: calc(100vh - 119px);
      .search-list {


        .search-list-top {
          overflow: auto;
          background-color: #fff;
          border-bottom: 1px solid #ebedf0;
          padding: 8px;
          margin-bottom: 8px;

          .top {
            /*display: flex;*/
            /*justify-content: space-between;*/
            line-height: 24px;
            color: #aaa;
          }

          .top1 {
            /*display: flex;*/
            /*justify-content: space-between;*/
            line-height: 24px;
            clear: both;
            color: #aaa;
          }

          .bottom {
            /*display: flex;*/
            /*justify-content: space-between;*/
            line-height: 24px;
          }
        }
      }
    }
  }

</style>
